<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="js/styleswitcher.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" title="style" />
    <link rel="alternate stylesheet" type="text/css" href="css/style_noir.css"title="style_noir" />
    <title>musicMAP - Statistiques</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load('visualization', '1', {packages: ['motionchart']});

    function drawVisualization() {
    var data = new google.visualization.DataTable();
      data.addRows(6);
      data.addColumn('string', 'Fruit');
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Expenses');

      data.setValue(0, 0, 'Artiste 1');
      data.setValue(0, 1, new Date (1988,0,1));
      data.setValue(0, 2, 1000);
      data.setValue(0, 3, 300);

      data.setValue(1, 0, 'Artiste 2');
      data.setValue(1, 1, new Date (1988,0,1));
      data.setValue(1, 2, 950);
      data.setValue(1, 3, 200);

      data.setValue(2, 0, 'Artiste 3');
      data.setValue(2, 1, new Date (1988,0,1));
      data.setValue(2, 2, 300);
      data.setValue(2, 3, 250);

      data.setValue(3, 0, 'Artiste 1');
      data.setValue(3, 1, new Date(1988,1,1));
      data.setValue(3, 2, 1200);
      data.setValue(3, 3, 400);

      data.setValue(4, 0, 'Artiste 2');
      data.setValue(4, 1, new Date(1988,1,1));
      data.setValue(4, 2, 900);
      data.setValue(4, 3, 150);

      data.setValue(5, 0, 'Artiste 3');
      data.setValue(5, 1, new Date(1988,1,1));
      data.setValue(5, 2, 788);
      data.setValue(5, 3, 617);

            var options = {};
            options['width']=[930];
            options['height']=[500];


      var motionchart = new google.visualization.MotionChart(
          document.getElementById('visualization'));
      motionchart.draw(data, {'width': 930, 'height': 500});
    }


    google.setOnLoadCallback(drawVisualization);
  </script>

	<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
</head>
<body>
	<div id="content">
		<p id="top">Vous êtes loggé en tant que : Michel Plasse <a href="#" id="deconnexion">Déconnexion</a></p>
		<div id="logo">
			<h1><a href="index.html"></a></h1>
		</div>
		<ul id="navigation">
			<li><a href="index.jsp">Accueil</a></li>
                        <li><a href="maps.html?action=getVilles">Maps</a></li>
			<li class="current"><a href="stats.html?action=getSemaines">Stats</a></li>
                        <li><a href="profil.jsp">Profil</a></li>
			<li><a href="contact.jsp">Contact</a></li>
		</ul>
		<div class="ligne"></div>
		<div class="intitule int_stats">
			<h1>Statistiques<br /></h1>
			<h2>Vous pouvez visualiser les statistiques de ZZZ sur les diagrammes ci-dessous.<br /></h2>
		</div>

		<div class="colonne carte">
			<h3>Progression de la popularité des artistes du Top 3</h3>

                        <br>
                           <c:if test="${listesemaines!=null}">
                               <c:forEach items="${listesemaines}" var="it">
                                        a<c:out value="${it[0]}"/>
                                        b<c:out value="${it[1]}"/><br/>
                               </c:forEach>
                            </c:if>
                        <br>
			
			<div id="visualization" style="width: 930px; height: 500px;"></div>
			
		</div>

		<div class="ligne"></div>
		<div class="gauche">
			<h4>Dernières nouvelles</h4>
			<p><em>Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p>
		</div>
		<div class="droite">
                    <%@include file="inc/news.html" %>
		</div>

		<div id="pied">
                    <%@include file="inc/pied.html" %>
		</div>
	</div>
</body>
</html>